<template>
  <div class="homework-tools">
    <div :class="['main', !show && 'main-close']">
      <div class="title">
        <div class="info-title">{{ data.title }}</div>
      </div>
      <!-- 1.单选 2.多选 3.判断 4.问答 5.打分 6.填空 -->
      <div v-for="(item, index) in data.detailVoList" :key="index">
        <div class="title">
          <div class="info-content">
            {{ item.question }}
          </div>
        </div>
        <div v-if="item.type === 4" class="content-main content-main-content">
          <div class="content-txt">{{ item.content }}</div>
          <mu-flex wrap="wrap" class="content-img-main" align-items="center">
            <img
              :src="baseImgUrl + imgItem"
              v-for="(imgItem, imgIndex) in item.imgs"
              :key="imgIndex"
              class="content-img-item"
            />
          </mu-flex>
        </div>
        <div
          v-else-if="item.type === 1 || item.type === 3"
          class="content-main content-main-select"
        >
          <div
            v-for="(childItem, childIndex) in item.options"
            :key="childIndex"
          >
            <mu-radio
              disabled
              :value="childItem.id"
              :label="childItem.title"
              :class="childItem.state === 1 ? 'mu-radio-checked' : ''"
            ></mu-radio>
          </div>
        </div>
        <div
          v-else-if="item.type === 2"
          class="content-main content-main-select"
        >
          <div
            v-for="(childItem, childIndex) in item.options"
            :key="childIndex"
          >
            <mu-checkbox
              :value="childItem.id"
              :label="childItem.title"
              :input-value="childItem.state === 1 ? true : false"
              disabled
            ></mu-checkbox>
          </div>
        </div>
        <div v-else-if="item.type === 6" class="content-main">
          <mu-text-field v-model="item.content" disabled></mu-text-field>
        </div>
      </div>
    </div>
    <div class="open-control">
      <span @click="show = !show">{{ show ? "收起" : "展开" }}</span>
    </div>
  </div>
</template>
<script>
export default {
  props: ["data"],
  data() {
    return {
      baseImgUrl: "http://image.xuexiwangzhe.com/",
      testRadio: "",
      testInput: "",
      show: false,
    };
  },
  watch: {
    "data.detailVoList": {
      deep: true,
      handler(list) {        
        this.$forceUpdate();
      },
    },
  },
  methods: {
    updateDom() {},
  },
};
</script>
<style lang="less">
.homework-tools {
  .main {
    overflow: hidden;
    margin-bottom: 10px;
  }

  .main-close {
    max-height: 300px;
  }

  .title {
    color: #363636;
    margin-bottom: 10px;
  }
  .content-main-content {
    width: 400px;
    border: 1px solid #bbb9b9;
    border-radius: 4px;
    box-sizing: content-box;
  }

  .content-main {
    margin-bottom: 20px;
  }

  .content-main-select {
    > * {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
  }

  .content-txt {
    padding: 10px;
  }

  .content-img-item {
    width: 100px;
    height: 100px;
    padding: 10px;
    box-sizing: border-box;
  }

  .open-control {
    text-align: center;
    color: #3366ff;
    > span {
      cursor: pointer;
    }
  }
}
</style>
